import React, { useState } from 'react'
import { Modal, List, Input, Button, message } from 'antd'
import { RobotOutlined, MessageOutlined } from '@ant-design/icons'

interface Message {
  id: number
  text: string
  isUser: boolean
}

export interface AIAssistantProps {
  visible: boolean
  onClose: () => void
}

const AIAssistant: React.FC<AIAssistantProps> = ({ visible, onClose }) => {
  const [messages, setMessages] = useState<Message[]>([
    { id: 1, text: "您好！我是您的AI助手，有什么可以帮助您的吗？", isUser: false }
  ])
  const [inputValue, setInputValue] = useState('')

  // 发送消息到AI助手
  const handleSend = () => {
    if (inputValue.trim() === '') {
      message.warning('请输入您的问题')
      return
    }
    
    // 添加用户消息
    const newUserMessage: Message = {
      id: messages.length + 1,
      text: inputValue,
      isUser: true
    }
    
    setMessages([...messages, newUserMessage])
    setInputValue('')
    
    // 模拟AI回复
    setTimeout(() => {
      const aiResponse: Message = {
        id: messages.length + 2,
        text: "感谢您的消息！这是一个模拟回复。在实际应用中，这里会连接到真正的AI服务。",
        isUser: false
      }
      setMessages(prev => [...prev, aiResponse])
    }, 1000)
  }

  return (
    <Modal
      title="AI助手"
      open={visible}
      onCancel={onClose}
      footer={null}
      width={600}
      styles={{ body: { padding: 0 } }}
      closable={true}
    >
      <div style={{ padding: '20px', height: '500px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, overflowY: 'auto', marginBottom: '10px' }}>
          <List
            dataSource={messages}
            renderItem={item => (
              <List.Item style={{ 
                justifyContent: item.isUser ? 'flex-end' : 'flex-start',
                borderBlockEnd: 'none',
                padding: '5px 0'
              }}>
                <div style={{
                  backgroundColor: item.isUser ? '#1890ff' : '#f0f0f0',
                  color: item.isUser ? 'white' : 'black',
                  padding: '8px 12px',
                  borderRadius: '16px',
                  maxWidth: '80%'
                }}>
                  {item.text}
                </div>
              </List.Item>
            )}
          />
        </div>
        <div style={{ display: 'flex' }}>
          <Input 
            value={inputValue}
            onChange={e => setInputValue(e.target.value)}
            onPressEnter={handleSend}
            placeholder="输入您的问题..."
            style={{ flex: 1, marginRight: '10px' }}
          />
          <Button type="primary" onClick={handleSend} icon={<MessageOutlined />}>
            发送
          </Button>
        </div>
      </div>
    </Modal>
  )
}

export default AIAssistant